<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta content="width=100%,initial-scale=1.0,maximum-scale=0.5,user-scalable=no" name="viewport" />
    <title>fly</title>
    <link rel="stylesheet" type="text/css" href="fly.css" />
</head>

<body>
    <div id="box">
        <div id="bird"><img src="img/fei.gif" style="width:100%;height:100%"></div>
        <div id="over">
            Game Over
            <div id="ndfen">你的分数是：<span id="ff">0</span></div>
            <div id="rest" onclick="rest()">重新开始</div>
        </div>
        <div id="fen">0</div>
        <div id="big">
            <div id="big_bt">F l y &emsp; B i r d </div>
            <div class="an" onclick="shubiao()">鼠标操作</div>
            <div class="an" onclick="jianpan()">键盘操作</div>
            <div id="big_sm">
                <b>说明：</b>游戏目标是通过上下移动来躲避竹子。游戏方式分为：<br> &emsp;1.鼠标操作，选择后会出现一个按钮，点击按钮小鸟向上飞，按住按钮小鸟静止不动，松开按钮小鸟向下飞。
                <br> &emsp;2.键盘操作，选择后使用方向键上、下来进行移动。
                <br> 选择一种方式点击开始游戏吧！！！
            </div>
        </div>
        <div id="anniu"><button id="dian"></button></div>
    </div>

    <script type="text/javascript">
        var bT = null; //键盘抬起
        var sT = null; //鼠标抬起
        var kg = "guan"; //开关
        var fs = 0; //分数
        var Zs = 2;
        var ZT = 1500; //竹子移动速度

        function rand(m, n) { //随机数
            return Math.ceil(Math.random() * (n - m + 1)) + (m - 1);
        }


        var box = document.getElementById("box"); //鸟的初始位置
        var bird = document.getElementById("bird");
        var bird_top = box.offsetHeight / 2 - bird.offsetHeight / 2;
        bird.style.top = bird_top + "px"; //纵坐标			


        //鼠标操作
        function shubiao() {
            kg = "kai";
            var fen = document.getElementById("fen");
            fen.style.display = "block"; //显示分数
            var anniu = document.getElementById("anniu");
            anniu.style.display = "block"; //显示鼠标点击按钮
            var big = document.getElementById("big");
            big.style.display = "none"; //隐藏鼠标键盘按钮
            window.onmouseup = function() { //抬起鼠标
                if (sT == null) {
                    sT = setInterval(function() { //自动向下掉
                        var btop = bird.offsetTop + 3;
                        bird.style.top = btop + "px";
                        var heig = box.offsetHeight - bird.offsetHeight; //掉的边界
                        if (btop >= heig) {
                            btop = 0;
                            bird.style.top = heig + "px";
                        }
                        //document.getElementById("dian").style.cursor = 'url("./img/1.png")15 15, auto';   //鼠标的自定义图片
                    }, 30)
                }
            }
            var down = document.getElementById("dian");
            down.onmousedown = function() {
                clearInterval(sT);
                sT = null;
                var btop = bird.offsetTop - 20;
                bird.style.top = btop + "px";
                if (btop <= 0) {
                    btop = 0; //上移的边界
                    bird.style.top = btop + "px";
                }
                //document.getElementById("dian").style.cursor = 'url("./img/2.png")15 15, auto';   //鼠标的自定义图片
            }
        }

        //键盘操作
        function jianpan() {
            kg = "kai";
            var fen = document.getElementById("fen");
            fen.style.display = "block"; //显示分数
            var big = document.getElementById("big");
            big.style.display = "none"; //隐藏鼠标键盘按钮
            clearInterval(time2);
            Zs = 4;
            ZT = 1000; //竹子移动加快
            time2 = setInterval(time1, ZT);
            window.onkeydown = function(e) {
                if (e.keyCode == 38) {
                    moveUp(); 
                    return  false;
                } else if (e.keyCode == 40) {
                    moveDown(); 
                    return  false;
                    // 及时使用dureturn false阻止事件 就能不让网页上下动了
                }
            }
            window.onkeyup = function() { //抬起键盘
                clearInterval(bT);
                bT = null;
            }

            function moveUp() { //上移
                if (bT == null) {
                    bT = setInterval(function() {
                        var btop = bird.offsetTop - 2;
                        bird.style.top = btop + "px";
                        if (btop <= 0) {
                            btop = 0; //上移的边界
                            bird.style.top = btop + "px";
                        }
                    }, 10)
                }
            }

            function moveDown() { //下移
                if (bT == null) {
                    bT = setInterval(function() {
                        var btop = bird.offsetTop + 2;
                        bird.style.top = btop + "px";
                        var heig = box.offsetHeight - bird.offsetHeight; //下移的边界
                        if (btop >= heig) {
                            btop = 0;
                            bird.style.top = heig + "px";
                        }
                    }, 10)
                }
            }
        }
        //生成柱子
        function time1() {
            if (kg == "guan") {
                return;
            }
            var nn = rand(-225, 0); //随机生成柱子的位置
            var xzhuz1 = document.createElement("div");
            xzhuz1.style.top = nn + "px";
            xzhuz1.setAttribute("class", "zhuz1");
            box.appendChild(xzhuz1);

            //柱子1移动				
            var z1 = setInterval(function() {
                var zleft1 = xzhuz1.offsetLeft - Zs;
                if (zleft1 <= -100) {
                    clearInterval(z1);
                    box.removeChild(xzhuz1);
                }
                //获取鸟的位置并赋值给下面
                var sw = document.getElementById("bird");
                var bileft = sw.offsetLeft;
                var baleft = sw.offsetLeft + 50;
                var bitop = sw.offsetTop;
                var batop = sw.offsetTop + 50;
                //分数增加
                if (bileft == zleft1 + 68) {
                    fs++;
                    var fen = document.getElementById("fen");
                    fen.innerHTML = fs;
                    var ff = document.getElementById("ff");
                    ff.innerHTML = fs;
                }
                //碰撞柱子游戏结束
                if (bileft <= zleft1 + 50 && baleft >= zleft1 && bitop <= nn + 270) {
                    clearInterval(z1);
                    clearInterval(z2);
                    gameover();
                }
                xzhuz1.style.left = zleft1 + "px";
            }, 12)

            //柱子2移动
            var xzhuz2 = document.createElement("div");
            xzhuz2.style.top = (nn + 425) + "px";
            xzhuz2.setAttribute("class", "zhuz2");
            box.appendChild(xzhuz2);
            var z2 = setInterval(function() {
                var zleft2 = xzhuz2.offsetLeft - Zs;
                if (zleft2 <= -100) {
                    clearInterval(z2);
                    box.removeChild(xzhuz2);
                }
                //获取鸟的位置并赋值给下面
                var sw = document.getElementById("bird");
                var bileft = sw.offsetLeft;
                var baleft = sw.offsetLeft + 50;
                var bitop = sw.offsetTop;
                var batop = sw.offsetTop + 50;
                //碰撞柱子游戏结束
                if (bileft <= zleft2 + 50 && baleft >= zleft2 && batop >= nn + 440) {
                    clearInterval(z1);
                    clearInterval(z2);
                    gameover();
                }
                xzhuz2.style.left = zleft2 + "px";
            }, 12)
        }
        var time2 = setInterval(time1, ZT);
        //游戏结束后弹出界面
        function gameover() {
            //死亡后，小鸟一直向下掉
            setInterval(function() {
                var btop = bird.offsetTop + 5;
                bird.style.top = btop + "px";
                var heig = box.offsetHeight - bird.offsetHeight; //掉的边界
                if (btop >= heig) {
                    btop = 0;
                    bird.style.top = heig + "px";
                }
            }, 30)

            clearInterval(time2);
            clearInterval(sT);
            kg = "guan";
            var over = document.getElementById("over");
            over.style.display = "block";
            setInterval(function() {
                var otop = over.offsetTop + 10;
                over.style.top = otop + "px";
                if (otop >= 0) {
                    otop = 0;
                    over.style.top = otop + "px";
                }
            }, 10)

        }

        function rest() {
            window.location.reload(); //刷新页面,相当于F5
        }
    </script>
</body>

</html>